<template>
  <div id="Announcements">
    <div class="head">
      <div class="left">
        <el-input placeholder="请输入内容" v-model="input1"> </el-input>
        <i slot="suffix" class="el-input__icon iconfont icon-sousuo" @click="handleSearch"></i>
      </div>
      <div class="right">
        <el-button type="primary" v-if="jurisdictionControl.add" round @click="handleclick">新增公告</el-button>
      </div>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table :data="tableData" style="width: 100%" height="100%" v-loading="tableLoading" size="medium"
          class="pageInnerTable">
          <el-table-column label="标题" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span class="titles" @click="handleDetails(scope.row.notice)">{{ scope.row.notice.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="通知范围" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.noticeRangeDtos" class="o" :key="index">
                {{ item.dataId[0] ? item.dataId[0].name : item.dataId[0] }}
                <span>;</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="状态">
            <template slot-scope="scope">
              <span class="Unpublished" v-if="scope.row.notice.status === 0">{{ "未发布" }}</span>
              <span class="Published" v-else-if="scope.row.notice.status === 1">{{ "已发布" }}</span>
              <span v-else-if="scope.row.notice.status === 2">{{ "已撤销" }}</span>
              <span v-else>{{ "删除" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间">
            <template slot-scope="scope">
              <span v-if="scope.row.notice.status === 1">{{ scope.row.notice.publishtime?.replace('T', ' ') }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
              <span>
                <el-button v-if="jurisdictionControl.release && scope.row.notice.status !== 1"
                  @click="handlerelease(scope.row)" type="text" size="small">发布</el-button>
                <el-button
                  v-if="jurisdictionControl.revoke && scope.row.notice.status !== 0 && scope.row.notice.status !== 2"
                  type="text" size="small" @click="handleRevoke(scope.row)">撤销</el-button>
                <el-button v-if="jurisdictionControl.edit && scope.row.notice.status !== 1" type="text" size="small"
                  @click="handleEdit(scope.row)">编辑</el-button>
                <el-button v-if="jurisdictionControl.delete && scope.row.notice.status !== 1" type="text" size="small"
                  @click="handledel(scope.row)">删除</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <pagination :listQuery="form" :total="total" :pageSizes="pageSizes" @getTableData="handlecolse"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { dateFormat } from "@/components/TimeFilter.js";
import pagination from "@/components/pagination";
export default {
  name: "Announcements",
  filters: {
    // 格式化时间
    dateFormat,
  },
  components: {
    pagination,
  },
  data() {
    return {
      // title: '',
      tableData: [],
      // 搜索输入
      input1: "",
      // 表格加载状态位
      tableLoading: false,
      form: {
        PageIndex: 1,
        PageSize: 50,
      },
      query: {
        name1: "发布 编辑 删除",
        name2: "撤销",
        name3: "编辑 删除",
      },
      total: 0,
      pageSizes: [5, 20, 50],
      jurisdictionControl: {
        add: false, // 发布新公告
        edit: false,
        delete: false,
        release: false,
        revoke: false,
      },
      subid: "00000000-0000-0000-0000-000000000000",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      moduleId: (state) => state.common.moduleId,
    }),
  },
  methods: {
    // 跳转到详情页
    handleDetails(row) {
      this.$router.push({
        path: "/AnnouncementManagement",
        query: {
          id: row.id,
        },
      });
    },
    // 搜索公告
    async handleSearch() {
      if (this.input1 !== "") {
        const ret = await this.$api.Announcement.getSearch({
          name: this.input1,
          type: 2,
        });
        this.tableData = ret.data.data;
      } else {
        this.handlecolse();
      }
      // this.$forceUpdate();
    },
    // 撤销公告
    async handleRevoke(row) {
      const ret = await this.$api.Announcement.getEditAnnouncement({
        notice: {
          id: row.notice.id,
          status: 2,
          content: row.notice.content,
          title: row.notice.title,
          subid: this.subid,
        },
        noticeRangeDtos: row.noticeRangeDtos,
      });
      if (ret.data.status === 200) {
        this.$message({
          type: "success",
          message: "撤销成功",
        });
        this.handlecolse();
        // this.$forceUpdate();
      } else {
        this.$message({
          type: "error",
          message: "撤销失败",
        });
      }
    },
    // 删除公告
    async handledel(row) {
      this.$confirm("此操作将永久删除该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const ret = await this.$api.Announcement.getEditAnnouncement({
            notice: {
              id: row.notice.id,
              status: 3,
              content: row.notice.content,
              title: row.notice.title,
              subid: this.subid,
            },
            noticeRangeDtos: row.noticeRangeDtos,
          });
          if (ret.data.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.handlecolse();
            // this.$forceUpdate();
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 发布新公告跳转
    handleclick() {
      // this.$router.push()
      this.$router.push({ name: "EditAnnouncement" });
    },
    // 编辑公告
    async handleEdit(row) {
      this.$router.push({
        path: "/EditAnnouncement",
        query: {
          id: row.notice.id,
        },
      });
    },
    // 发布
    async handlerelease(row) {
      const ret = await this.$api.Announcement.getEditAnnouncement({
        notice: {
          id: row.notice.id,
          status: 1,
          content: row.notice.content,
          title: row.notice.title,
          subid: this.subid,
        },
        noticeRangeDtos: row.noticeRangeDtos,
      });
      if (ret.data.status === 200) {
        this.$message({
          type: "success",
          message: "发布成功",
        });
        this.handlecolse();
        // this.$forceUpdate();
      } else {
        this.$message({
          type: "error",
          message: "发布失败",
        });
      }
    },
    // 分页数据
    async handlecolse() {
      this.tableLoading = true;
      const ret = await this.$api.Announcement.getPagingAnnouncement({
        index: this.form.PageIndex,
        pageSize: this.form.PageSize,
      });
      this.tableData = ret.data.data.items;
      this.total = ret.data.data.totalCount;
      // this.$forceUpdate();
      this.tableLoading = false;
    },

    getJurisdiction() {
      // 权限
      if (this.userInfo.isadmin) {
        this.jurisdictionControl = {
          add: true, // 发布新公告
          edit: true,
          delete: true,
          release: true,
          revoke: true,
        };
        return;
      }
      let params = {
        id: this.moduleId,
      };
      this.$api.publicApi.GetActionInfo(params).then((res) => {
        let resData = res.data.data;
        resData.map((item) => {
          if (item.name === "新增") {
            this.jurisdictionControl.add = true;
          }
          if (item.name === "编辑") {
            this.jurisdictionControl.edit = true;
          }
          if (item.name === "删除") {
            this.jurisdictionControl.delete = true;
          }
          if (item.name === "发布") {
            this.jurisdictionControl.release = true;
          }
          if (item.name === "发布") {
            this.jurisdictionControl.revoke = true;
          }
        });
      });
    },
  },
  mounted() {
    this.getJurisdiction();
    // this.handlecolse();
  },
  activated() {
    this.handleSearch();
  },
  created() {
    // this.handleSearch();
  },
};
</script>

<style lang="less">
#Announcements {
  .o {
    display: inline-block;
  }

  .o:nth-last-child(1) {
    span {
      display: none;
    }
  }

  .head {
    display: flex;
    justify-content: flex-end;

    .left {
      justify-content: flex-start;
      display: flex;
      align-items: center;
    }

    .right {
      flex: 1;
      justify-content: flex-end;
      display: flex;
      align-items: center;
    }

    .el-input__icon {
      transform: translateX(-20px);
    }
  }

  .tableContent {
    padding: 0;

    .titles {
      cursor: pointer;
    }

    .el-table th {
      text-align: left !important;
    }

    .Published {
      color: rgb(105, 243, 105);
    }

    .Unpublished {
      color: rgb(87, 71, 236);
    }
  }

  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;

    .el-pagination__total {
      line-height: 28px;
    }
  }

  .operationLogForm {
    .el-form-item {
      float: left;
      width: 150px;
      margin-right: 15px;

      .el-input {
        width: 100%;
      }
    }
  }

  .pageMain {
    height: calc(100% - 57px) !important;
  }
}
</style>
